<template>
  <div class="echarts h-auto">
    <ECharts
      v-if="option"
      :option="option"
      :id="`Line` + props.id"
      ref="lineEChartsRef"
      :onClick="nodeClick"
    />
    <!-- <div ref="chartContainer" style="width: 600px; height: 400px"></div> -->
  </div>
</template>

<script lang="ts" setup>
import * as echarts from "echarts";
import { getPieces } from "../index";
const props = defineProps({
  id: {
    type: String,
    default: () => {
      return "";
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  showName: {
    type: Boolean,
    default: true,
  },
  // 曲线x轴/y轴数据
  seriesData: {
    type: Object,
    default: () => {
      return {
        paramName: "Journal C-Diameter (bottom)",
        upperLimitValue: 515,
        lowerLimitValue: 280,
        controlDown: 290,
        controlUp: 490,
        parameterStandards: 350,
        xdataIndex: [
          "1",
          "2",
          "4",
          "6",
          "8",
          "10",
          "12",
          "14",
          "16",
          "18",
          "20",
        ],
        xdata: [
          "2024-01-11 12:00",
          "2024-01-11 12:02",
          "2024-01-11 12:04",
          "2024-01-11 12:06",
          "2024-01-11 12:08",
          "2024-01-11 12:10",
          "2024-01-11 12:12",
          "2024-01-11 12:14",
          "2024-01-11 12:16",
          "2024-01-11 12:18",
          "2024-01-11 12:20",
        ],
        ydata: [250, 380, 515, 243, 280, 500, 280, 540, 243, 280, 260],
      };
    },
  },
});
const { seriesData, showName } = toRefs(props);
const emit = defineEmits(["cpkNumberChange"]);

const option = ref();
const lineEChartsRef = ref();

// // 创建对DOM元素的引用
// const chartContainer = ref(null);
// let myChart = null;

// // 数据点的选择状态（true表示已选择，false表示未选择）
// const selectedStates = ref([]);
// // 数据点及其状态
// const dataPoints = ref([
//   {
//     value: 150,
//     controlLimit: false,
//     toleranceLimit: false,
//     selected: false,
//     removed: false,
//   },
//   {
//     value: 230,
//     controlLimit: true,
//     toleranceLimit: false,
//     selected: false,
//     removed: false,
//   },
//   {
//     value: 224,
//     controlLimit: false,
//     toleranceLimit: true,
//     selected: false,
//     removed: false,
//   },
//   // ... 添加更多数据点
// ]);

// onMounted(() => {
//   // 初始化图表实例
//   myChart = echarts.init(chartContainer.value);

//   // 设置初始配置项
//   const initOption = {
//     xAxis: {
//       type: "category",
//       data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
//     },
//     yAxis: {
//       type: "value",
//     },
//     series: [
//       {
//         name: "Series Name",
//         type: "line",
//         data: dataPoints.value.map((dp) => dp.value),
//         itemStyle: {
//           color: (params) => getItemColor(params.dataIndex),
//         },
//       },
//     ],
//   };

//   // 使用配置项初始化图表
//   myChart.setOption(initOption);

//   // 添加点击事件监听器
//   myChart.on("click", handleChartClick);
// });

// onUnmounted(() => {
//   if (myChart) {
//     // 销毁图表实例以防止内存泄漏
//     myChart.dispose();
//   }
// });

// // 点击事件处理函数
// function handleChartClick(params) {
//   if (params.componentType === "series" && params.seriesType === "line") {
//     // 更新被点击的数据点的选择状态
//     dataPoints.value[params.dataIndex].selected =
//       !dataPoints.value[params.dataIndex].selected;

//     // 刷新图表样式
//     updateChart();
//   }
// }

// // 获取节点颜色的辅助函数
// function getItemColor(index) {
//   const point = dataPoints.value[index];
//   if (point.removed) return "gray"; // 移除状态显示灰色
//   if (point.selected) return "red"; // 被选中时显示红色
//   if (point.controlLimit) return "yellow"; // 超出控制限显示黄色
//   if (point.toleranceLimit) return "orange"; // 超出公差限显示橙色
//   return "blue"; // 正常显示蓝色
// }

// // 更新图表方法
// function updateChart() {
//   myChart.setOption(
//     {
//       series: [
//         {
//           data: dataPoints.value.map((dp) => dp.value),
//           itemStyle: {
//             color: (params) => getItemColor(params.dataIndex),
//           },
//         },
//       ],
//     },
//     false
//   ); // notMerge设为false，合并新旧option
// }

// // 移除/取消移除功能
// function toggleRemove(index) {
//   dataPoints.value[index].removed = !dataPoints.value[index].removed;
//   updateChart();
// }
// 折线图数据变更
watch(
  () => seriesData.value,
  (newVal) => {
    setOptions();
  },
  {
    deep: true,
    immediate: true,
  }
);

// 计算y轴最小值
function computedMin(minValue: number) {
  if (seriesData.value.lowerLimitValue < minValue) {
    return seriesData.value.lowerLimitValue - 0.01;
  } else {
    return minValue;
  }
}

// 计算y轴最大值
function computedMax(maxValue: number) {
  if (seriesData.value.upperLimitValue < maxValue) {
    return maxValue;
  } else {
    return seriesData.value.upperLimitValue;
  }
}

function setOptions() {
  option.value = {
    animation: true,
    animationDuration: 3 * 100,
    color: ["#4A95FF", "rgb(45, 93, 231)", "#15b3ff", "rgb(69,108,244)"],
    tooltip: {
      trigger: "axis",
      formatter: function (value: any) {
        return `${showName.value ? value[0].seriesName + "<br />" : ""}第${
          value[0].axisValueLabel
        }个节点&nbsp; ${seriesData.value.xdata[value[0].dataIndex]}<br />${
          value[0].marker
        }&nbsp; ${value[0].data}`;
      },
      textStyle: {
        align: "left",
        fontSize: 13,
        fontFamily: "DINAlt",
        lineHeight: 30,
      },
    },
    grid: {
      left: "10",
      top: "100",
      right: 10,
      height: "auto",
      // minHeight: 400, // 单位为像素
      bottom: "5%",
      containLabel: true,
    },
    title: {
      text: seriesData.value.paramName || "",
      textStyle: {
        align: "center",
        fontSize: 16,
        fontFamily: "DINLight",
      },
      top: "4%",
      left: "center",
    },
    xAxis: {
      type: "category",
      data: seriesData.value.xdataIndex || [],
      axisLabel: {
        interval: "auto", // 坐标刻度之间的显示间隔，默认就可以了
        // rotate: 38, // 调整数值改变倾斜的幅度（范围-90到90）
        fontSize: 12,
        fontFamily: "DINLight",
      },
      axisTick: {
        alignWithLabel: true, // true：标签位于刻度线正下方；false：标签位于2个刻度线中间
      },
    },
    yAxis: {
      type: "value", // 坐标轴类型:数值轴
      // name: "湿度", // 坐标轴名称
      boundaryGap: false,
      // scale: true,
      min: function (value: any) {
        return computedMin(value.min);
      },
      max: function (value: any) {
        return computedMax(value.max);
      },
      position: "left", // 坐标轴位置:左侧
      // axisLabel: {
      //   interval: "auto", // 坐标刻度之间的显示间隔，默认就可以了
      //   // 调整数值改变倾斜的幅度（范围-90到90）
      // },
      // interval: "auto", // 坐标轴刻度间隔(当前被注释掉)
      offset: 0, // 坐标轴相对于默认位置的偏移:无偏移
      axisLine: {
        show: true, // 是否显示坐标轴线
        lineStyle: {
          color: "#6e7079", // 坐标轴线颜色:使用颜色数组的第一个颜色
        },
      },
      axisLabel: {
        fontSize: 12,
        fontFamily: "DINLight",
        // 自定义标签显示：当布尔类型图表，则显示 true or false
        formatter: function (value: number) {
          return value;
        },
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: true, // 是否显示分隔线
        lineStyle: {
          type: "dotted", // 分隔线类型:点线
        },
      },
    },
    dataZoom: [
      // {
      //   type: "slider", // 滑动条型数据区域缩放
      //   start: 0,
      //   end: 100,
      // },
      {
        type: "inside", // 内置型数据区域缩放
        start: 0,
        end: 100,
      },
    ],
    series: {
      name: `${seriesData.value.paramName || ""}`,
      type: "line",
      data: seriesData.value.ydata.map(function (item: any) {
        return item.index;
      }),
      // label: {
      //   // 自定义标签显示：当布尔类型图表，则显示 true or false
      //   formatter: function (obj: any) {
      //     obj.value;
      //     // console.log(obj);
      //   },
      // },
      markLine: {
        silent: true,
        data: [
          {
            name: "",
            yAxis: `${seriesData.value?.parameterStandards || null}`,
            lineStyle: {
              color: "rgb(29, 233, 182)",
              type: "dashed",
              width: 1,
            },
            label: {
              show: false,
              position: "end",
              formatter: "标准线",
            },
          },
          {
            name: "",
            yAxis: `${seriesData.value?.upperLimitValue || null}`,
            lineStyle: {
              color: "rgb(248, 113, 113)",
              type: "dashed",
              width: 1,
            },
            label: {
              show: false,
              position: "end",
              formatter: "上线",
            },
          },
          {
            name: "",
            yAxis: `${seriesData.value?.lowerLimitValue || null}`,
            lineStyle: {
              color: "rgb(248, 113, 113)",
              type: "dashed",
              width: 1,
            },
            label: {
              show: false,
              position: "end",
              formatter: "下线",
            },
          },
          {
            name: "",
            yAxis: `${seriesData.value?.controlUp || null}`,
            lineStyle: {
              color: "#ffd300",
              type: "dashed",
              width: 1,
            },
            label: {
              show: false,
              position: "end",
              formatter: "预警上线",
            },
          },
          {
            name: "",
            yAxis: `${seriesData.value?.controlDown || null}`,
            lineStyle: {
              color: "#ffd300",
              type: "dashed",
              width: 1,
            },
            label: {
              show: false,
              position: "end",
              formatter: "预警下线",
            },
          },
        ],
        symbol: "none",
      },
      symbol: "circle",
      symbolSize: 6,
      lineStyle: {
        width: 1.5,
      },
      itemStyle: {
        // 定义点的颜色
        color: function (params) {
          // if (seriesData.value.ydata[params.dataIndex].hh) {
          //   return "#4A95FF";
          // } else {
          //   return "#f56c6c";
          // }
          // params是当前点的信息，可以根据条件返回不同的颜色
          // if (
          //   params.value >= seriesData.value.upperLimitValue ||
          //   params.value <= seriesData.value.lowerLimitValue
          // ) {
          //   return "#f56c6c"; // 如果值大于1000，点的颜色为红色
          // } else if (
          //   params.value >= seriesData.value.controlUp ||
          //   params.value <= seriesData.value.controlDown
          // ) {
          //   return "#ffd300"; // 否则为绿色
          // } else {
          //   return "#4A95FF"; // 否则为绿色
          // }
          // seriesData.value.ydata.forEach((item, index) => {
          //   console.log(item.hh, index, params.dataIndex);
          //   if (index == params.dataIndex && item.hh) {
          //     return "#4A95FF";
          //   }
          // });
        },
        color: (params) => getItemColor(params),
        // // 节点边框颜色
        // borderColor: "rgba(220,20,60,0.8)",
        // 节点边框宽度
        // borderWidth: 4,
      },
    },
    // visualMap: [
    //   {
    //     show: false,
    //     pieces: getPieces(seriesData.value),
    //     seriesIndex: 0,
    //   },
    // ],
  };
}

// // 获取节点颜色的辅助函数
function getItemColor(params) {
  if (seriesData.value.ydata[params.dataIndex].hh) {
    return "#9097ac";
  } else {
    if (
      params.value >= seriesData.value.upperLimitValue ||
      params.value <= seriesData.value.lowerLimitValue
    ) {
      return "#f56c6c"; // 如果值大于1000，点的颜色为红色
    } else if (
      params.value >= seriesData.value.controlUp ||
      params.value <= seriesData.value.controlDown
    ) {
      return "#ffd300"; // 否则为绿色
    } else {
      return "blue"; // 否则为绿色
    }
  }
}

// 点击事件;
const nodeClick = (params) => {
  ElMessageBox.confirm(
    `确定${
      seriesData.value.ydata[params.dataIndex].hh ? "取消移除" : "移除"
    }吗?`,
    "提示",
    {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
    }
  )
    .then(async () => {
      seriesData.value.ydata[params.dataIndex].hh =
        !seriesData.value.ydata[params.dataIndex].hh;
      ElMessage({
        type: "success",
        message: `${
          seriesData.value.ydata[params.dataIndex].hh ? "移除" : "取消移除"
        }成功!`,
      });
      emit("cpkNumberChange", 33);
      // const res: any = await request({
      //   url: "eam/modbomgroup/disabledList",
      //   method: "post",
      //   data: { ids: ids.value },
      // });
      // if (res.code == 200) {
      //   ElMessage({
      //     type: "success",
      //     message: "批量停用成功",
      //   });
      // }
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消选择！",
      });
    });
};

onMounted(() => {});
</script>

<style lang="scss" scoped>
.echarts {
  width: 100%;
  height: 880px;
}

.echarts:nth-last-child(1) {
  border-bottom: none !important;
}
</style>
